<template>
    <view :data-theme="globPrimary">
        <u-navbar title="修改支付密码"></u-navbar>
        <view class="password-wrapper">
            <!-- 原密码验证 -->
            <view class="password" v-show="states == 1">
                <view class="title">请输入原密码</view>
                <view
                    class="u-flex"
                    style="display: flex; justify-content: center"
                    ><u-message-input
                        :maxlength="6"
                        :dot-fill="true"
                        :breathe="false"
                        inactiveColor="#303133"
                        @finish="handlePasswordFinish"
                    ></u-message-input
                ></view>
                <edu-button
                    class="margin-top-170"
                    type="primary"
                    :disabled="pwdBtnDisabled"
                    @click="handleVerifyRawPassword"
                    :custom-style="customStyle"
                    >下一步</edu-button
                >
                <view
                    class="btn u-margin-top-80"
                    :style="{ color: globPrimaryColor }"
                    @click="states = 2"
                    >短信验证码验证</view
                >
            </view>

            <!-- 手机号验证 -->
            <view class="verify" v-show="states == 2">
                <u-form :model="form" ref="uForm" label-width="152">
                    <u-form-item label="手机号">
                        <view class="text">{{
                            userInfo.phone | formatMask
                        }}</view>
                    </u-form-item>
                    <u-form-item label="验证码" prop="verify">
                        <u-input
                            placeholder="请输入验证码"
                            v-model="form.verify"
                            type="text"
                        ></u-input>
                        <button
                            slot="right"
                            @click="handleGetCode"
                            :disabled="codeType"
                            :class="[codeType ? 'code-disabled' : '']"
                            class="u-reset-button verify-btn"
                            :style="{ color: globPrimaryColor }"
                        >
                            {{ codeTips }}
                        </button>
                    </u-form-item>
                </u-form>
                <edu-button
                    class="margin-top-170"
                    type="primary"
                    :disabled="codeBtnDisabled"
                    @click="handlePhoneVerifySubmit"
                    >下一步</edu-button
                >
                <view class="btn u-margin-top-60" @click="states = 1"
                    >原密码验证</view
                >
            </view>

            <!-- 第一次输入密码 -->
            <view class="input-view u-padding-top-40" v-if="states == 3">
                <view class="phone"
                    >为帐号{{ userInfo.phone | formatMask }}</view
                >
                <view class="title">设置6位数字支付密码</view>
                <view
                    class="u-flex"
                    style="display: flex; justify-content: center"
                    ><u-message-input
                        :maxlength="6"
                        :dot-fill="true"
                        :breathe="false"
                        inactiveColor="#303133"
                        @finish="handlePwdSubmitOne"
                    ></u-message-input
                ></view>
            </view>

            <!-- 第二次输入密码 -->
            <view class="input-view padding-top-90" v-else-if="states == 4">
                <view class="title">再次输入支付密码</view>
                <view
                    class="u-flex margin-bottom-120"
                    style="display: flex; justify-content: center"
                >
                    <u-message-input
                        :maxlength="6"
                        :dot-fill="true"
                        :breathe="false"
                        inactiveColor="#303133"
                        @finish="handlePwdSubmitTwo"
                    ></u-message-input>
                </view>
                <edu-button
                    @click="handleModifyPwdSubmit"
                    type="primary"
                    :disabled="disabled"
                    >完成</edu-button
                >
            </view>
        </view>
        <u-verification-code
            seconds="60"
            ref="uCode"
            @change="codeChange"
            @end="codeEnd"
            @start="codeStart"
        ></u-verification-code>
        <u-toast ref="uToast" />
    </view>
</template>

<script>
import md5Libs from "@/uview-ui/libs/function/md5";
import { mapGetters } from "vuex";
export default {
    data() {
        return {
            form: {
                verify: "",
            },
            codeTips: "",
            codeType: false,
            rules: {
                verify: [
                    {
                        required: true,
                        message: "请输入验证码",
                        trigger: ["change", "blur"],
                    },
                ],
            },
            states: 1,
            rawPassword: "",
            password: "",
            rePassword: "",
            pwdBtnDisabled: true,
            disabled: true,
            customStyle: {
                marginTop: "80rpx",
            },
        };
    },
    computed: {
        ...mapGetters({
            globPrimary: "designSetting/getGlobTheme",
            globPrimaryColor: "designSetting/getGlobThemeColor",
            userInfo: "user/getUserInfo",
        }),
        codeBtnDisabled() {
            return this.form.verify == "" ? true : false;
        },
    },
    options: { styleIsolation: "shared" },
    methods: {
        // 手机号验证提交
        handlePhoneVerifySubmit() {
            this.$refs.uForm.validate((valid) => {
                if (valid) {
                    this.$edu.api
                        .createUserBalancePwdVerify({
                            phone: this.userInfo.phone,
                            code: this.form.verify,
                        })
                        .then((res) => {
                            this.states = 3;
                            this.$u.toast(res.msg);
                        })
                        .catch((res) => {
                            this.$u.toast(res.msg);
                        });
                }
            });
        },
        // 原密码验证输入完成后执行
        handlePasswordFinish(val) {
            this.rawPassword = val;
            this.pwdBtnDisabled = false;
        },
        // 验证原密码
        handleVerifyRawPassword() {
            this.$edu.api
                .createUserBalancePwdBefore({
                    password: md5Libs.md5(this.rawPassword),
                })
                .then((res) => {
                    this.states = 3;
                    this.$u.toast(res.msg);
                })
                .catch((res) => {
                    this.$u.toast(res.msg);
                });
        },
        // 第一次密码输入完成
        handlePwdSubmitOne(val) {
            this.states = 4;
            this.password = val;
        },
        // 第二次密码输入完成
        handlePwdSubmitTwo(val) {
            this.rePassword = val;
            this.disabled = false;
        },
        // 提交修改支付密码
        handleModifyPwdSubmit() {
            if (this.password !== this.rePassword) {
                this.$u.toast("两次输入的密码不一致");
                return;
            }
            this.$edu.api
                .putUserBalancePwd({
                    password: md5Libs.md5(this.rePassword),
                })
                .then((res) => {
                    this.$refs.uToast.show({
                        title: res.msg,
                        back: true,
                    });
                })
                .catch((res) => {
                    this.$u.toast(res.msg);
                });
        },
        // 获取验证码
        handleGetCode() {
            if (this.$refs.uCode.canGetCode) {
                this.$edu.api
                    .createVerify({
                        phone: this.userInfo.phone,
                        type: "bpwd",
                    })
                    .then((res) => {
                        this.$u.toast(res.msg);
                        this.$refs.uCode.start();
                    })
                    .catch((res) => {
                        this.$u.toast(res.msg);
                    });
            }
        },
        // 倒计时
        codeChange(text) {
            this.codeTips = text;
        },
        // 倒计时开始
        codeStart() {
            this.codeType = true;
        },
        // 倒计时结束
        codeEnd() {
            this.codeType = false;
        },
    },
    onReady() {
        this.$refs.uForm.setRules(this.rules);
    },
};
</script>

<style lang="scss" scoped>
.margin-top-170 {
    margin-top: 170rpx;
}
.password-wrapper {
    min-height: calc(100vh - 44px);
    background-color: #fff;
    padding: 0 30rpx;
    .btn {
        text-align: center;
        font-size: 30rpx;
        font-weight: 400;
        @include text-color();
    }
    .verify {
        .text {
            font-size: 28rpx;
            font-weight: 400;
            color: $edu-tips-color;
        }
        .verify-btn {
            font-size: 28rpx;
            font-weight: 400;
            @include text-color();
        }
        .code-disabled {
            @include text-color-disabled();
            background-color: transparent;
        }
    }

    .password {
        padding-top: 90rpx;
        .title {
            font-size: 36rpx;
            font-weight: 400;
            color: $edu-main-color;
            text-align: center;
            margin-bottom: 54rpx;
        }
        .u-char-box {
            margin-left: auto;
            margin-right: auto;
        }
        /deep/.u-char-flex {
            border-radius: 8rpx;
            border: 1px solid #b7bac1;
            .u-char-item {
                margin: 0;
            }
            .u-box {
                border: 0;
                border-radius: 0;
            }
            view + view {
                .u-box:after {
                    content: " ";
                    position: absolute;
                    left: 0;
                    top: 0;
                    bottom: 0;
                    border-left: 1px solid #b7bac1;
                    z-index: 2;
                }
            }
        }
    }
    .padding-top-90 {
        padding-top: 90rpx;
    }
    .margin-bottom-120 {
        margin-bottom: 120rpx;
    }
    .input-view {
        .phone {
            font-size: 30rpx;
            font-weight: 400;
            color: $edu-tips-color;
            text-align: center;
            margin-bottom: 10rpx;
        }
        .title {
            font-size: 36rpx;
            font-weight: 400;
            color: $edu-main-color;
            text-align: center;
            margin-bottom: 54rpx;
        }
        .u-char-box {
            margin-left: auto;
            margin-right: auto;
        }
        /deep/.u-char-flex {
            border-radius: 8rpx;
            border: 1px solid #b7bac1;
            .u-char-item {
                margin: 0;
            }
            .u-box {
                border: 0;
                border-radius: 0;
            }
            view + view {
                .u-box:after {
                    content: " ";
                    position: absolute;
                    left: 0;
                    top: 0;
                    bottom: 0;
                    border-left: 1px solid #b7bac1;
                    z-index: 2;
                }
            }
        }
    }
}
</style>
